<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    title="渠道信息"
    :footer="null"
    :width="1000"
    :height="480"
    :canFullscreen="false"
    :destroyOnClose="true"
    wrapClassName="stationPopup"
    @height-change="handleHeightChange"
  >
    <ul class="canalList">
      <li class="listItem">
        <em>渠道名称：</em>
        <span>{{ state.canalData?.name }}</span>
      </li>
      <li class="listItem">
        <em>上游节点：</em>
        <span>{{ state.canalData?.upNode }}</span>
      </li>
      <li class="listItem">
        <em>断面：</em>
        <span>{{ state.canalData?.surface }}</span>
      </li>
      <li class="listItem">
        <em>下游节点：</em>
        <span>{{ state.canalData?.downNode }}</span>
      </li>
      <li class="listItem">
        <em>设定长度(km)：</em>
        <span>{{ state.canalData?.setLength }}</span>
      </li>
      <li class="listItem">
        <em>渠道长度(km)：</em>
        <span>{{ state.canalData?.distance || '暂无' }}</span>
      </li>
      <li class="listItem">
        <em>设计流量(m³/s)：</em>
        <span>暂无</span>
      </li>
      <li class="listItem">
        <em>渠道级别：</em>
        <span>暂无</span>
      </li>
      <li class="listItem">
        <em>灌溉面积(亩)：</em>
        <span>暂无</span>
      </li>
      <li class="listItem">
        <em>渠段水利用系数：</em>
        <span>暂无</span>
      </li>
    </ul>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref, reactive, provide } from 'vue';
  import { BasicModal, useModalInner } from '@gui-pkg/antdcomponents';

  defineOptions({ name: 'Canal' });

  const modalHeightValue = ref(680);
  const state = reactive({
    canalData: null,
    canalType: {
      1: '干渠',
      2: '支渠',
    }
  });

  const [register, { setModalProps }] = useModalInner(async (data) => {
    setModalProps({ confirmLoading: false });
    state.canalData = data.record;
  });

  // 弹窗高度变化，主要是监听是否点击了全屏
  const handleHeightChange = (height: string) => {
    modalHeightValue.value = height;
  };
  provide('ModalHeightChange', modalHeightValue);
</script>

<style lang="less" rel="stylesheet/less" scoped>
  .canalList {
    display: flex;
    flex-wrap: wrap;
    padding: 0 20px;
    .listItem {
      width: 50%;
      height: 40px;
      display: flex;
      align-items: center;
      font-size: 15px;
      em {
        color: #666;
      }
      span {
        color: #111;
      }
    }
  }
</style>
